<template>
  <div class="box">
    <header>
      <a-input placeholder="寻找队伍……">
        <template #suffix>
          <PlusCircleTwoTone/>
        </template>
      </a-input>
    </header>
    <div class="exam" style="height: 120px;">
      <div class="head" style="background: linear-gradient(135deg, #c850c0, #4158d0);">
        <span> 近期比赛</span> <span style="color: #409EFF">更多比赛>>></span>
      </div>
      <div class="cnt">
        <div style="flex:1">
          <CrownTwoTone/>
          第十届挑战杯
        </div>
        <div class="icon" style="width: 60px;height: 30px;">
          <button @click="Go">进入</button>
        </div>
      </div>
    </div>
    <div class="info">
      <div class="head" style=" background: radial-gradient(178px at 1.8% 4%, rgb(162, 208, 254) 0.1%, rgba(193, 94, 245, 0.73) 100.2%);
"><span> 官方通知</span> <span style="color: orangered">更多通知>>></span>
      </div>
      <div class="cnt">
        <div class="item">
          <span style="flex: 3"> 第一条通知</span> <span style="flex: 1;color: #C0C4CC">2023-10-28</span>
        </div>
        <div class="item">
          <span style="flex: 3"> 第一条通知</span> <span style="flex: 1">2023-10-28</span>
        </div>

      </div>
    </div>

    <div class="cnt">
      <a-tabs v-model:activeKey="activeKey">
        <a-tab-pane key="1">
          <template #tab>
        <span>
         <CommentOutlined/>

        </span>
          </template>
          <div class="list" v-for="i in list">
            <div class="top">

              <a-avatar shape="square" :size="40" :src="i.ava">
              </a-avatar>

              <div>
                <span class="name">{{ i.name }}</span>
                <span class="time">{{ i.time }}  <a-tag color="blue" style="line-height: 16px; font-size: 10px ;margin-left:10px">{{ i.college }}</a-tag></span>
              </div>
            </div>
            <div class="desc">
              <div class="title">
                {{ i.title }}
              </div>
              <div class="msg">
                {{ i.cnt }}
              </div>
            </div>
          </div>
        </a-tab-pane>


        <a-tab-pane key="2">
          <template #tab>
        <span>
     <UsergroupAddOutlined/>
        </span>
          </template>
          Tab 2
        </a-tab-pane>
      </a-tabs>
    </div>

  </div>
</template>

<script setup>
import {PlusCircleTwoTone, CrownTwoTone, CommentOutlined, UsergroupAddOutlined} from "@ant-design/icons-vue"
import {onMounted, ref} from 'vue';

const list = ref([
  {
    ava: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff3dfa152-d9c2-423d-9997-b491e72542da%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712234024&t=b6e8a7543ad8056cd8c2882842f28a1a",
    name: "张三",
    time: "2024-12-11",
    college: "计算机",
    title: "第一条通知",
    cnt: "巴拉巴拉了巴卡不卡不卡不巴拉巴拉波澜巴卡爆了巴拉巴拉你tyujytujytgjnfghfgdfx"
  },
  {
    ava: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff3dfa152-d9c2-423d-9997-b491e72542da%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712234024&t=b6e8a7543ad8056cd8c2882842f28a1a",
    name: "张三",
    time: "2024-12-11",
    college: "计算机",
    title: "第一条通知",
    cnt: "巴拉巴拉了巴卡不卡不卡不巴拉巴拉波澜巴卡爆了巴拉巴拉你"
  },
  {
    ava: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff3dfa152-d9c2-423d-9997-b491e72542da%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1712234024&t=b6e8a7543ad8056cd8c2882842f28a1a",
    name: "张三",
    time: "2024-12-11",
    college: "计算机",
    title: "第一条通知",
    cnt: "巴拉巴拉了巴卡不卡不卡不巴拉巴拉波澜巴卡爆了巴拉巴拉你"
  }
])
const activeKey = ref("1")
</script>

<style scoped lang="less">


@media screen and(max-width: 480px) {
  header {
    width: 90vw;
    margin: 10px auto;
  }

  .box {
    font-size: 12px;

    div {
      width: 95%;
      margin: 10px auto;
    }

    .head {
      color: #409EFF;
      text-align: start;
      // font-size: 16px;
      padding: 10px;
      color: #ffffff;
      letter-spacing: 1px;
      font-weight: 700;
      width: 100%;
      margin: 0;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;


    }

    .info {
      .cnt {
        display: flex;
        flex-direction: column;

        .item {
          width: 97%;
          height: 40px;
          line-height: 40px;
          display: flex;
          color: #606266;
          text-align: start;
          border-bottom: #EBEEF5 solid 1px;
          margin: 0 auto;


        }
      }
    }

    .exam, .info {
      border-radius: 10px;
      padding: 0;
      overflow: hidden;
      height: 150px;
      background-color: #ffffff;

    }

    .exam {
      .cnt {
        width: 97%;
        height: 50px;
        line-height: 50px;
        display: flex;
        color: #606266;
        text-align: start;
        justify-content: space-between;
        color: #409EFF;
        font-size: 14px;
        align-items: center;


      }

    }

    .cnt {
      background-color: #ffffff;
      padding: 10px;
      border-radius: 10px;
       div{
         width: 100%;
       }
      .list {
        border-bottom: 1px solid #EBEEF5;
        .top {
          height: 50px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          div{
            margin-left: 10px;
            text-align: start;
            display: flex;
            flex-direction: column;

            .name{
              letter-spacing: 1px;
              font-weight: 600;
            }
            .time{
              color:#A8ABB2;
              font-size: 12px;
            }

          }
        }
        .desc{
          text-align: start;

          .title{
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1px;
          }
          .msg{
            color:#909399;
            font-size: 12px;
             display: -webkit-box;
            /* 3. 控制行数*/
            -webkit-line-clamp: 2;
            /* 4. 设置子元素的排列方式  垂直排列*/
            -webkit-box-orient: vertical;
            /* 5.溢出隐藏 */
            overflow: hidden;
          }

        }
      }
    }
  }
}
</style>